<template>
<div ref="note" class="note-plaza">
    <Split :style="{'height': splitHeight + 'px' }" v-model="sout_split_value" size="small">
        <div slot="left" class="split-pane">
            <Scroll :on-reach-bottom="handleReachBottom" style="height: 100%">
                <Input search placeholder="输入文件名搜索..."  size="default"/>
                <List border v-for="item in fileList" :key="item.id">
                    <ListItem @contextmenu.native="contextmenu($event,item)" @click.native="listItemClickHandle(item)" :id="item.id" style="cursor: pointer; background: white;" @mouseenter.native="mouseEnterHandle(item.id)" @mouseleave.native="mouseLeaveHandle(item.id)">
                        <ListItemMeta :title="item.fileName" :description="item.description" />
                    </ListItem>
                </List>
            </Scroll>
            <e-vue-contextmenu style="width:100px" ref="menu_display" id="contextStyle">
                <div class="context-menu" @click="listItemClickHandle(itemMenu)">打开</div>
                <div class="context-menu" @click="newFileClickHandle(itemMenu)">新建</div>
                <div class="context-menu" @click="deleteFileClickHandle(itemMenu)">删除</div>
                <div class="context-menu" @click="updateFileNameClickHandle(itemMenu)">更名</div>
            </e-vue-contextmenu>
        </div>
        <div slot="right" class="split-pane">
            <div @keydown.s = "ctrlAndSHandleClick" id="wang_editor" style="height:100%; width: 100%; z-index: 0;"></div>
        </div>
    </Split>
    <Row ref="footer" style="background: #e8eaec" type="flex" justify="center" align="bottom" class="code-row-bg"> 2020 - 2021 &copy; DATonG </Row>
    <TheNoteModal :id="id" :isShowNoteModal="isShowModal" @close-modal="closeModal"></TheNoteModal>
</div>
</template>

<script lang="tsx">
import { Component } from "vue-property-decorator";
import wangEdit from 'wangeditor';
import { NOTE, PAGE, SAVE, INFO, APPD } from '@/store/modules/crud/keys'
import cryptoDes from "@/utils/crypto";
import TheNoteModal  from './modal/NoteModal.vue';

@Component({components: { TheNoteModal }})
export default class TheNoteplaza extends cryptoDes{
    sout_split_value = 0.15;
    itemMenu: any;
    newFileItem: any;
    isShowModal: boolean = false;
    id: string = '';

    get _name(){
        return NOTE;
    }
    get fileList(){
        return this.state.page.content; 
    }
    //单击文件名时触发
    listItemClickHandle(item: any){
        const appd = this.appd;
        if(appd){
            if(appd.id !=null && appd.id != undefined){
                if(appd.id == item.id){
                    return;
                }
                const note =  document.getElementById(appd.id);
                if(note!=null){
                    note.style.background = "white";
                }
            }
        }
        this.$store.commit(APPD, {name: this._name, appd: item});
        window.sessionStorage.setItem('appd', JSON.stringify(item));
        const note = document.getElementById(item.id);
        if(note!=null){
            note.style.background = "#d5e0e2";
        }
        const noteContent = item.noteContent;
        if(noteContent){
            const content = noteContent.content;
            if(content){
                this.editor.txt.html(this.decodeDesMessage(content));
                return ;
            }
        }
        this.editor.txt.html("");
    }
    //搜索文件
    handleReachBottom(){}
    mounted(){
        //css与编辑器初始化
        this.init();
    }
    //初始化文件列表
    created () {
        this.$store.dispatch(PAGE, {name: this._name});
        this.editor = new wangEdit('#wang_editor');
    }
    editorOnChange(newHtml: any) {}
    editorOnBlur(html: any){}
    editorOnfocus(html: any){}
    //鼠标进入div改变颜色
    mouseEnterHandle(id: string){
        const appd = this.appd;
        if(appd){
            if(appd.id === id){return ;}
        }
        const note = document.getElementById(id);
        if(note!=null){
            note.style.background = "#c5c8ce";
        }
    }
    //鼠标离开div回复颜色
    mouseLeaveHandle(id: string){
        const appd = this.appd;
        if(appd){
            if(appd.id == id){
                return;
            }
        }
        const note = document.getElementById(id);
        if(note != null){
            note.style.background = "white";
        }
    }
    //选中所记录的文件
    async updated(){
        const appd = window.sessionStorage.getItem("appd");
        let item: any;
        if(appd){
            const promise = await this.$store.dispatch(INFO, {name: this._name, id: JSON.parse(appd).id});
            if(promise){
                item = this.state.info;
            }
        }else{
            item = this.fileList[0];
        }
        if(!item){return ;}
        const note = document.getElementById(item.id);
        if(note!=null){
            note.style.background = "#d5e0e2";
        }
        this.$store.commit(APPD,{name: this._name, appd: item});
        const noteContent = item.noteContent;
        
        if(noteContent){
            const content = noteContent.content;
            if(content){
                const htmlMess = this.decodeDesMessage(content);
                this.editor.txt.html(htmlMess);
                return ;
            }
        }
        this.editor.txt.html("");
    }
    //光标在编辑区按ctrl+s时，保存内容
    ctrlAndSHandleClick(e: any){
        e.preventDefault();//禁止浏览器菜单显示
        if(e.ctrlKey == true){//ctrl+s被触发
            this.saveEditor();
        }
    }
    //鼠标右键时显示菜单
    contextmenu(e: any, item: any){
        e.preventDefault();
        this.itemMenu = item;
        (this.$refs.menu_display as any).showMenu(e);
    }
    //自定义菜单-新建文件时触发
    newFileClickHandle(item: object){
        this.id = '';
        (this.$refs.menu_display as any).hideMenu();
        this.isShowModal = true;
    }
    //自定义菜单——删除文件时触发
    deleteFileClickHandle(item: any){
        (this.$refs.menu_display as any).hideMenu();
    }
    async updateFileNameClickHandle(item: any){
        const promise = await this.$store.dispatch(INFO,{name: NOTE, id: item.id});
        if(promise){
            this.isShowModal = true;
            this.id = item.id;
        }
        (this.$refs.menu_display as any).hideMenu();
    }
    //保存编辑框内容
    async saveEditor(){
        const htmlCont: string = this.editor.txt.html();
        const textCont: string = this.editor.txt.text();
        const appd = this.appd;
        if(appd){
            const fileName = appd.fileName;
            if(fileName){
                const description = textCont.substring(0,20).toString;
                const noteContent = this.encodeDesMessage(htmlCont);
                const entity = {
                    id: appd.id,
                    // fileName: fileName,
                    description: description,
                    noteContent: {
                        content: noteContent
                    }
                }
                this.$store.commit(INFO, { name: NOTE, info: entity });
                const promise = await this.$store.dispatch(SAVE, { name: NOTE });
                if(promise) this.$Message.success("保存成功!");
                this.$store.dispatch(PAGE, {name: this._name});
                return;
            }
            this.$Message.error("当前打开文件错误.");
        }
        this.$Message.error("文件名不存在");
    }
    closeModal(){
        this.isShowModal = false;
        this.id = '';
    }
}
</script>

<style scoped>
.note-plaza{
    height: 100%;
    width: 100%;
    border: 1px solid #cfd0d3;
    background: white;
    overflow: hidden;
}
.split-pane {
    height: 100%;
    border: 1px;
    background: white;
}
.list-item-default {
    background:white
}
.list-item-mouseover {
    background:#9ebec4 
}
.context-menu{
    padding: 5px 5px 5px 25px;

}
</style>
